<template>
  <div class="user-behavior-review-details">
    <div class="table-con">
      <el-table
        height="100%"
        class="my-table"
        empty-text="暂无数据"
        :data="state.tableData">
        <el-table-column label="行为名称" align="center" prop="action_name"></el-table-column>
        <el-table-column label="协议"  prop="protocol" align="center"></el-table-column>
        <el-table-column label="Ipv4源地址" align="center" prop="Ipv4_origin"></el-table-column>
        <el-table-column label="Ipv4目的地址" align="center" prop="Ipv4_target"></el-table-column>
        <el-table-column label="更新时间" align="center" prop="update_time"></el-table-column>
      </el-table>

      <el-config-provider :locale="customPagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="state.currentPage"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="state.tableData.length">
        </el-pagination>      
      </el-config-provider>
    </div>

    <div class="visualization">
      <div class="common-style">
        <h2>通联关系</h2>
        <div class="interconnectivity">
          <el-empty description="暂无数据"></el-empty>
        </div>
      </div>
      <div class="common-style">
        <h2>位置轨迹</h2>
        <div class="map-box">
          <div id="my-map"></div>
        </div>
      </div>
      <div class="common-style">
        <h2>时序行为</h2>
        <div class="temporal-behavior">
          <div id="my-behavior" :option="state.behaviorOption" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import customPagination from "../../../config/third-plugins/customPagination";
interface ubrd {
  tableData:Array<any>,
  currentPage:number,
  mapOption:any,
  behaviorOption:any
}

const state = reactive<ubrd>({
  tableData: [
    {
      id: 1,
      action_name: '下载/上传文件',
      protocol: 'FTP',
      Ipv4_origin: '15.26.210.151',
      Ipv4_target: '25.55.20.251',
      update_time: '2023-07-14 11:14:25'
    },
    {
      id: 1,
      action_name: '下载/上传文件',
      protocol: 'FTP',
      Ipv4_origin: '15.56.210.151',
      Ipv4_target: '65.55.20.200',
      update_time: '2023-07-15 14:24:05'
    },
    {
      id: 1,
      action_name: '下载/上传文件',
      protocol: 'FTP',
      Ipv4_origin: '25.56.100.151',
      Ipv4_target: '25.55.20.251',
      update_time: '2023-07-14 11:14:25'
    },
    {
      id: 1,
      action_name: '下载/上传文件',
      protocol: 'FTP',
      Ipv4_origin: '35.56.200.151',
      Ipv4_target: '35.55.10.251',
      update_time: '2023-07-14 11:14:25'
    },
    {
      id: 1,
      action_name: '下载/上传文件',
      protocol: 'FTP',
      Ipv4_origin: '63.56.202.171',
      Ipv4_target: '15.56.70.251',
      update_time: '2023-07-14 11:14:25'
    },
    {
      id: 1,
      action_name: '下载/上传文件',
      protocol: 'FTP',
      Ipv4_origin: '55.51.220.171',
      Ipv4_target: '25.55.20.251',
      update_time: '2023-07-14 11:14:25'
    },
    {
      id: 1,
      action_name: '下载/上传文件',
      protocol: 'FTP',
      Ipv4_origin: '15.56.100.151',
      Ipv4_target: '35.15.10.251',
      update_time: '2023-07-14 11:14:25'
    },
    {
      id: 1,
      action_name: '下载/上传文件',
      protocol: 'FTP',
      Ipv4_origin: '35.56.100.151',
      Ipv4_target: '25.15.20.251',
      update_time: '2023-07-14 11:14:25'
    },
    {
      id: 1,
      action_name: '下载/上传文件',
      protocol: 'FTP',
      Ipv4_origin: '65.56.200.151',
      Ipv4_target: '25.55.20.251',
      update_time: '2023-07-14 11:14:25'
    },
    {
      id: 1,
      action_name: '下载/上传文件',
      protocol: 'FTP',
      Ipv4_origin: '65.56.200.151',
      Ipv4_target: '25.55.20.251',
      update_time: '2023-07-14 11:14:25'
    }
  ],
  currentPage: 1,

  mapOption: {},
  behaviorOption: {}
})

const drawMap = async () => {
  var series = [];

  const lineData = [
    {
      from: {
        name: '美国蒙特里',
        location: [-121.874729, 36.541478]
      },
      to: {
        name: '中国上海',
        location: [121.4648, 31.2891]
      },
      name: '美国蒙特里 -> 中国上海'
    },
    {
      from: {
        name: '荷兰奥特芬',
        location: [5.057415, 52.735095]
      },
      to: {
        name: '中国上海',
        location: [121.4648, 31.2891]
      },
      name: '荷兰奥特芬 -> 中国上海'
    }
  ]
  const dataInfo = drawLine(lineData)
  series.push({
    type: 'lines',
    zlevel: 2,
    effect: {
      show: true,
      period: 4, //箭头指向速度，值越小速度越快
      trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
      symbol: 'arrow', //箭头图标
      symbolSize: 5, //图标大小
    },
    lineStyle: {
      width: 1, //尾迹线条宽度
      opacity: 1, //尾迹线条透明度
      curveness: .3, //尾迹线条曲直度
      color: '#0960bd'
    },
    data: dataInfo
  })

  const pointData = [
    {
        "name": "美国蒙特里",
        "value": [-121.874729, 36.541478,
            0
        ]
    },
    {
        "name": "荷兰奥特芬",
        "value": [
            5.057415,
            52.735095,
            0
        ]
    },
    {
        "name": "中国上海",
        "value": [
            121.4648,
            31.2891,
            0
        ]
    }
  ]
  series.push(
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: { //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4 //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        show: true,
        position: 'right', //显示位置
        offset: [5, 0], //偏移设置
        formatter: function(params:any){//圆环显示文字
          return params.data.name;
        },
        fontSize: 13
      },
      symbol: 'circle',
      symbolSize: function(val:any) {
        return 5+ val[2] * 5; //圆环大小
      },
      itemStyle: {
        show: false,
        color: '#0960bd'
      },
      data: pointData
    }
  )

  state.mapOption = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(166, 200, 76, 0.82)',
      borderColor: '#FFFFCC',
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      extraCssText: 'z-index:100',
      formatter: function(params:any, ticket:any, callback:any) {
        switch(params.componentSubType) {
          case 'effectScatter':
            return params.data.name
          case 'lines':
            return params.data.name
        }
      }
    },
    backgroundColor:"#fff",
    geo: {
      map: 'world',
      zoom: 1.2,
      roam: true, //是否允许缩放
      itemStyle: {
        color: 'rgba(51, 69, 89, .5)', //地图背景色
        borderColor: '#516a89', //省市边界线00fcff 516a89
        borderWidth: 1
      }
    },
    series: series
  }

  const map:any = await import('./world.json')
  echarts.registerMap('world', map)
  const dom = document.getElementById('my-map')
  const mapChart = echarts.init(dom as HTMLElement)

  mapChart.clear()
  mapChart.setOption(state.mapOption)

  window.addEventListener('resize', () => {
    nextTick(() => {
      const dom = document.getElementById('my-map')
      if (dom) {
        mapChart.resize()
      }
    })
  })

}

const drawLine = (data:any) => {
  let lineData:Array<any> = []
  if (data && data.length) {
    data.forEach((i:any) => {
      // const temp = []
      const temp = {
        coords: [],
        name: ''
      }
      const coords:any = []
      for (const key in i) {
        // if (key === 'from' || key === 'to') {
          // temp.push({coord: i[key].location})
        // }
        switch(key) {
          case 'from':
            coords.push(i[key].location)
            break
          case 'to':
            coords.push(i[key].location)
            break
          case 'name':
            temp.name = i[key]
        }
      }
      temp.coords = coords
      lineData.push(temp)
    })
    return lineData
  } else {
    return []
  }
}

const drawBehavior = () => {
  state.behaviorOption = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2023-06-27 09:45:02', '2023-06-28 09:45:02', '2023-06-29 09:45:02', '2023-06-30 09:45:02', '2023-07-01 09:45:02'],
      axisLabel: {
        formatter: function (params:any) {
          const temp = params.split(' ')
          return temp[0] + '\n' + temp[1]
        },
        color: '#747474'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color:'#e4e4e4',
          width: 1,
          type: 'deshed'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#747474',
          width: 1
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {  
        show: true  ,
        lineStyle:{
          color: '#e4e4e4',
          width: 1,
          type: 'deshed'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#747474',
          width: 1
        }
      },
      axisLabel: {
        color: '#747474'
      }
    },
    series: [
      {
        name: '邮件营销',
        type: 'line',
        stack: '总量',
        data:[120, 132, 101, 134, 90, 230, 210],
        symbol: 'none',
        lineStyle: {
          color: '#2593ff'
        }
      }
    ]
  }

  const dom = document.getElementById('my-behavior')
  const bChart = echarts.init(dom as HTMLElement)

  bChart.clear()
  bChart.setOption(state.behaviorOption)

  window.addEventListener('resize', () => {
    nextTick(() => {
      const dom = document.getElementById('my-behavior')
      if (dom) {
        bChart.resize()
      }
    })
  })
}

const handleCurrentChange = (val:any) => {}

onMounted(() => {
  nextTick(() => {
    drawMap()
    drawBehavior()
  })
})
</script>

<style lang="scss" scoped>
.user-behavior-review-details {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  .table-con {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 46%;
    margin-bottom: 20px;
    .operate {
      display: inline-block;
      margin-right: 8px;
      color: #0f89f1;
      cursor: pointer;
      i::before {
        color: #0f89f1;
        display: inline-block;
        margin-right: 5px;
      }
    }
  }
  .search {
    margin-bottom: 20px;
    .my-btn {
      margin-left: 10px;
    }
  }
  .visualization {
    flex: 1;
    display: flex;
    justify-content: space-between;
    .common-style {
      width: calc(33.3% - 10px);
      height: 100%;
      border: 1px solid #ebeef5;
      position: relative;
      h2 {
        position: absolute;
        left: 15px;
        top: -12px;
        width: 80px;
        color: #409eff;
        font-size: 16px;
        text-align: center;
        z-index: 9999;
        background-color: #fff;
        span {
          color: #555;
        }
      }
    }
    .map-box {
      width: 100%;
      height: 100%;
      padding: 0 10px;
      box-sizing: border-box;
      div {
        height: 100%;
      }
    }
    .interconnectivity {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .temporal-behavior {
      width: 100%;
      height: 100%;
      padding: 0 10px;
      box-sizing: border-box;
      div {
        height: 100%;
      }
    }
  }
  :deep(.el-pagination) {
    align-self: end;
    margin-top: 18px;
  }

  :deep(.el-table__inner-wrapper::before) {
    background-color: #ebeef5;
  }
}
</style>